<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core">

<h:head>
   <script src="//maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" 
            type="text/javascript"></script>
            
	<script src="//maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>            
<script type="text/javascript" language="javascript">

var map; 
var geocoder; 
var place;
 

    function initialize() {
	  map = new GMap2(document.getElementById("map_canvas_streetview"));
      map.setCenter(new GLatLng(34, 0), 1);
      geocoder = new GClientGeocoder();
      showLocation();
    }

    // addAddressToMap() is called when the geocoder returns an
    // answer.  It adds a marker to the map with an open info window
    // showing the nicely formatted version of the address and the country code.
    function addAddressToMap(response) {
      map.clearOverlays();
      if (!response || response.Status.code != 200) {
        alert("Sorry, we were unable to geocode that address");
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        alert(place.Point.coordinates[1] + ":" + place.Point.coordinates[0]);
       // marker = new GMarker(point);
       // map.addOverlay(marker);
       // marker.openInfoWindowHtml(place.address + '<br/>' +
       //   '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
      }

      streetView();
    }

    // showLocation() is called when you click on the Search button
    // in the form.  It geocodes the address entered into the form
    // and adds a marker to the map at that location.
    function showLocation() {

      
      var address = document.forms[0].q.value;
      geocoder.getLocations(address, addAddressToMap);
    }

   // findLocation() is used to enter the sample addresses into the form.
    function findLocation(address) {
      document.forms[0].q.value = address;
      showLocation();
    }
    </script>
    
 <script type="text/javascript">   
    
   function streetView() {
    var fenway = new google.maps.LatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
    var mapOptions = {
      center: fenway,
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas_streetview"), mapOptions);
    var panoramaOptions = {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
        zoom: 1
      }
    };
    var panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
    map.setStreetView(panorama);
  }
    </script>
    
  </h:head>

  <body onload="initialize();"/>

    <!-- Creates a simple input box where you can enter an address
         and a Search button that submits the form. //-->
    <h:form>
      
      Dirección : #{inmobleForm.adreca} Numero : #{inmobleForm.numero} Localidad : #{inmobleForm.localitatStr} Provincia : #{inmobleForm.provinciaStr}
        <input type="hidden" name="q" value="#{inmobleForm.adreca} #{inmobleForm.numero} #{inmobleForm.localitatStr} #{inmobleForm.provinciaStr}" class="address_input" size="40" />
      
          
    <div id="map_canvas_streetview" style="width: 400px; height: 300px"></div>
    <div id="pano" style="width: 400px; height: 300px;"></div> 
   
    </h:form>


</html>


   
   
